<template >
	<div class="content">
		<div class="content-header">试题组管理</div>
		<div class="content-table">
			<el-form inline size="mini">
				<el-form-item >
					<el-input  placeholder="试题组名称" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="getList">查 询</el-button>
					<el-button icon="el-icon-refresh" @click="resetList">重 置</el-button>
				</el-form-item>
			</el-form>
			<el-table
					:data="tableData"
					stripe
					>
				<el-table-column
						prop="number"
						label="自增编号"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="name"
						label="试题组名称"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="num"
						label=题库试题数
						align="center"
				>
				</el-table-column>
				<el-table-column
						label=总分
						align="center"
				>
					<template>100</template>
				</el-table-column>
				<el-table-column
						label="操作"
						align="center"
				>
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="openEdit(scope.row)">编 辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.id)">删 除</el-button>
						<el-button type="primary" size="mini" @click="apply(scope.row.id)">{{scope.row.status === 0 ? '发 布' : '取消发布'}}</el-button>
					
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-footer">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					background
					:page-size="10"
					small
					layout="total, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		<!--编辑试题组-->
		<el-dialog title="编辑试题组" :visible.sync="editDialog" width="25%">
			<el-form label-width="90px" size="small" :model="editForm" :rules="rulesOne" ref="editForm">
				<el-form-item label="名称:" prop="name">
					<el-input v-model="editForm.name" placeholder="请输入试题组名称"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="submitEdit('editForm')" size="small">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template >

<script >
    import {playQuestionList,editPlayQuestion,delPlayQuestion,applyPlayQuestion} from "../api/question";
    export default {
        data(){
            return{
                tableData:[],
                total:null,
                form:{
                    name: "",
                    pageIndex: 1,
                    pageSize: 10,
                    status: null
				},
                editDialog:false,
                editForm:{}
            }
        },
		mounted() {
            this.getList()
        },
        methods: {
            async getList(){
                const { data } = await playQuestionList(this.form)
                if (data.code === 200){
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
            },
            resetList(){
                this.form.name = ''
				this.getList()
			},
            //编辑弹窗
            openEdit(item){
                const { id,name} = item
                this.editForm = {  id,name}
                this.editDialog = true
            },
            //提交编辑
            submitEdit(editForm){
                this.$refs[editForm].validate((valid) => {
                    if (valid) {
                        editPlayQuestion(this.editForm).then(res => {
                            if (res.data.code === 200){
                                this.$notify.success(res.data.message)
                                this.editDialog = false
                                this.editForm = {}
                                this.getList()
                            }
                        })
                    }
                });
            },
            //删除试题组
            del(id){
                this.$confirm('删除该试题组, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delPlayQuestion(id).then(res => {
                        if (res.data.code === 200){
                            this.$notify.success(res.data.message)
                            this.getList()
                        }
                    })
                })
            },
			//发布/取消发布试题组
            apply(id){
                this.$confirm('发布或取消该试题组, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    applyPlayQuestion(id).then(res => {
                        if (res.data.code === 200){
                            this.$notify.success(res.data.message)
                            this.getList()
                        }
                    })
                })
			},
            //分页
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getList()
            }
        },
    }
</script >

<style scoped lang="less" >
	@import "../assets/style/common";
</style >
